<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/erp/js/html5.js"></script>
    <script type="text/javascript" src="/erp/js/respond.min.js"></script>
    <script type="text/javascript" src="erp/js/PIE_IE678.js"></script>
    <![endif]-->
    <link href="/erp/assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/erp/css/style.css"/>
    <link href="/erp/assets/css/codemirror.css" rel="stylesheet">
    <link rel="stylesheet" href="/erp/assets/css/ace.min.css"/>
    <link rel="stylesheet" href="/erp/Widget/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="/erp/assets/css/font-awesome.min.css"/>
    <link href="/erp/assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/erp/css/style.css"/>
    <link rel="stylesheet" href="/erp/assets/css/ace.min.css"/>
    <link rel="stylesheet" href="/erp/assets/css/font-awesome.min.css"/>
    <link href="/erp/Widget/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <script src="/erp/js/jquery-1.9.1.min.js"></script>
    <script src="/erp/assets/js/bootstrap.min.js"></script>
    <!--[if IE 7]>
    <link rel="stylesheet" href="/erp/assets/css/font-awesome-ie7.min.css"/>
    <![endif]-->
    <link href="/erp/Widget/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <link href="/erp/Widget/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css"/>
    <title>部门管理</title>
</head>
<body>
<div class="clearfix" id="add_picture">
    <div id="scrollsidebar" class="left_Treeview">
        <div class="show_btn" id="rightArrow"><span></span></div>
        <div class="widget-box side_content">
            <div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
            <div class="side_list">
                <div class="widget-header header-color-green2">
                    <h4 class="lighter smaller">现有部门列表</h4>
                </div>
                <div class="widget-body">
                    <div class="widget-main padding-8">
                        <div id="treeDemo" class="ztree"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page_right_style">
        <div class="type_style">
            <div class="type_title">部门信息</div>
            <div class="type_content">
        <span id="spans1" style="display:block">
		<div class="Operate_btn">
			<a href="javascript:;" onClick="xinzeng()" class="btn  btn-warning">
				<i class="icon-plus align-top bigger-125"></i>新增下级部门</a>
			<a href="javascript:" id="shanchu" class="btn  btn-danger" onclick="del()">
				<i class="icon-trash   align-top bigger-125"></i>删除该部门</a> </div>
        <form action="" method="post" class="form form-horizontal" id="update_from">
				  <ul class=" page-content">
			<div class="Operate_cont clearfix">
			  <label class="form-label"><span class="c-red">*</span>部门编号：</label>
			  <div class="formControls " style="width:280px;">
				 <input type="text" onblur="judge(this,1)" class="input-text" value="" placeholder="" id="department_no"
                        name="no" title="部门编号">
			  </div>
			</div>
					  <input type="hidden" id="d_id" name="id" value=""/>
					  <input type="hidden" id="p_id" name="pid" value=""/>
			<div class="Operate_cont clearfix">
			  <label class="form-label"><span class="c-red">*</span>部门名称：</label>
			  <div class="formControls ">
				<input type="text" onblur="judge(this,2)" class="input-text" value="" placeholder=""
                       id="department_name" name="name" 部门名称>
			  </div>
			</div>
			<div class="Operate_cont clearfix">
			  <label class="form-label"><span class="c-red">*</span>部门经理：</label>
			  <div class="formControls ">
				<input type="text" onblur="judge(this,3)" class="input-text" value="" placeholder="" id="manager"
                       name="manager" title="部门经理">
			  </div>
			</div>
			<div class="Operate_cont clearfix">
			  <label class="form-label"><span class="c-red">*</span>联系电话：</label>
			  <div class="formControls ">
				<input type="text" onblur="judge(this,4)" class="input-text" value="" placeholder="" id="phone"
                       name="phone" title="联系电话">
			  </div>
			</div>
			<div class="Operate_cont clearfix">
			  <label class="form-label"><span class="c-red"></span>固定电话：</label>
			  <div class="formControls ">
				<input type="text" onblur="judge(this,5)" class="input-text" value="" placeholder="" id="tel" name="tel"
                       title="固定电话">
			  </div>
			</div>
			<div class="Operate_cont clearfix">
			  <label class="form-label"><span class="c-red"></span>邮箱：</label>
			  <div class="formControls ">
				<input type="text" onblur="judge(this,6)" class="input-text" value="" placeholder="" id="email"
                       name="email" title="邮箱">
			  </div>
			</div>
			<div class="Operate_cont clearfix">
			  <label class="form-label"><span class="c-red"></span>部门职位：</label>
			  <div class="formControls " id="test2">
				<input type="text" class="input-text" value="" placeholder="" id="post" name="posts"
                       onblur="judge_post(this)"><i
                      class="btn btn-success icon-plus" style="margin-left:10px;" onClick="fun1()"></i>
				  <br/><br/>
			  </div>
			</div>
			
			<div class="Operate_cont clearfix">
			  <label class="form-label">部门简介：</label>
			  <div class="formControls">
				<textarea name="intro" id="intro" rows="" class="textarea" placeholder=""
                          dragonfly="true" onblur="judge(this,7)" oninput="text_length(this)"></textarea>
				<p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
			  </div>
			</div>
		  </ul>
		<div class="">
            <div class="" style=" text-align:center">
              <input class="btn btn-primary radius" type="submit" value="保存">
			  <input class="btn btn-primary radius" type="reset" value="取消" id="res">
            </div>
          </div>
        </form></span>
                <span id="spans2" style="display:none;">
		<!--<div class="Operate_btn"> <span style="font-size:20px;font-weight: bolder;"> 新增销售部下级部门 </span></div>-->
		<form id="add_from">
				<ul class=" page-content">
			<div class="Operate_cont clearfix">
			  <label class="form-label"><span class="c-red"></span>父级部门：</label>
			  <div class="formControls " style="width:280px;">
				 <input type="text" readonly="readonly" class="input-text" value="" placeholder=""
                        name="parent_department" id="parent_department" title="父级部门">
			  </div>
			</div>
			<div class="Operate_cont clearfix">
			  <label class="form-label"><span class="c-red">*</span>部门编号：</label>
			  <div class="formControls " style="width:280px;">
				 <input type="text" onblur="judge(this,1)" class="input-text" value="" placeholder="请输入部门编号"
                        name="no" id="d_no" title="部门编号">
			  </div>
			</div>
			<div class="Operate_cont clearfix">
			  <label class="form-label"><span class="c-red">*</span>部门名称：</label>
			  <div class="formControls ">
				<input type="text" onblur="judge(this,2)" class="input-text" value="" placeholder="请输入部门名称"
                       name="name" id="d_name" title="部门名称">
			  </div>
			</div>
			<div class="Operate_cont clearfix">
			  <label class="form-label"><span class="c-red">*</span>部门经理：</label>
			  <div class="formControls ">
				<input type="text" onblur="judge(this,3)" class="input-text" value="" placeholder="请输入部门经理"
                       name="manager" id="d_manager" title="部门经理">
			  </div>
			</div>
			<div class="Operate_cont clearfix">
			  <label class="form-label"><span class="c-red">*</span>联系电话：</label>
			  <div class="formControls ">
				<input type="text" onblur="judge(this,4)" class="input-text" value="" placeholder="请输入手机号" name="phone"
                       id="d_phone" title="手机号">
			  </div>
			</div>
			<div class="Operate_cont clearfix">
			  <label class="form-label"><span class="c-red"></span>固定电话：</label>
			  <div class="formControls ">
				<input type="text" onblur="judge(this,5)" class="input-text" value="" placeholder="请输入固定电话" name="tel"
                       id="d_tel" title="固定电话">
			  </div>
			</div>
			<div class="Operate_cont clearfix">
			  <label class="form-label"><span class="c-red"></span>邮箱：</label>
			  <div class="formControls ">
				<input type="text" onblur="judge(this,6)" class="input-text" value="" placeholder="请输入邮箱" name="email"
                       id="d_email" title="邮箱">
			  </div>
			</div>

			<div class="Operate_cont clearfix">
			  <label class="form-label"><span class="c-red"></span>部门简介：</label>
			  <div class="formControls">
				<textarea name="intro" rows="" class="textarea" placeholder=""
                          dragonfly="true" onblur="judge(this,7)" id="d_intro" oninput="text_length(this)"></textarea>
				<p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
			  </div>
			</div>
			<div class="">
            <div class="" style=" text-align:center">
              <input class="btn btn-primary radius" id="tijiao" type="submit" value="提交" onClick=""/>
			  <input class="btn btn-primary radius" id="tijiao1" type="reset" value="取消" onClick="exit_a()"/>
            </div>
          </div>
		  </ul>
		</form></span>
            </div>
        </div>
    </div>
</div>


<script src="/erp/js/jquery-1.9.1.min.js"></script>
<script src="/erp/assets/js/bootstrap.min.js"></script>
<script src="/erp/assets/js/typeahead-bs2.min.js"></script>
<script src="/erp/assets/layer/layer.js" type="text/javascript"></script>
<script src="/erp/assets/laydate/laydate.js" type="text/javascript"></script>
<script type="text/javascript" src="/erp/Widget/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/erp/Widget/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="/erp/Widget/zTree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/erp/Widget/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="/erp/Widget/webuploader/0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="/erp/Widget/ueditor/1.4.3/ueditor.config.js"></script>
<script src="/erp/js/lrtk.js" type="text/javascript"></script>
<script>
    //正则表达式
    var test1 = /^\d{1,8}$/;  //编号1+
    var test2 = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;  //手机号码
    var test3 = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;    //邮箱
    var test4 = /^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$/;    //中文字母数字2-20
    var test5 = /\d{3}-\d{8}|\d{4}-\d{7}/;     //国内固定电话
    var test6 = /^.{3,100}$/;    //所有字符3-100
    var arr = [test1, test4, test4, test2, test5, test3, test6];
    //错误提示信息
    var arr2 = ["编号格式错误", "部门不能输入特殊字符,且长度为2-20", "名字不能输入特殊字符,且长度为2-20", "请输入正确的手机号", "请输入正确的固定电话", "请输入正确的邮箱", "备注长度在3-100位"]
    //修改表单的输入框id(除职位框)
    var arr3 = ["department_no", "department_name", "manager", "phone", "tel", "email", "intro"];
    //添加表单的输入框id
    var arr4 = ["d_no", "d_name", "d_manager", "d_phone", "d_tel", "d_email", "d_intro"];
    //判断编号是否存在
    var boo = false;
    $(function () {
        $("#add_picture").fix({
            float: 'left',
            skin: 'green',
            durationTime: false,
            stylewidth: '220',
            spacingw: 0,
            spacingh: 260,
        });
    });
    $(document).ready(function () {
        //初始化宽度、高度
        $(".widget-box").height($(window).height());
        $(".page_right_style").height($(window).height());
        $(".page_right_style").width($(window).width() - 220);
    });
    //当文档窗口发生改变时 触发
    $(window).resize(function () {

        $(".widget-box").height($(window).height());
        $(".page_right_style").height($(window).height());
        $(".page_right_style").width($(window).width() - 220);
    });

    /*职位列-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $(obj).parent("div").remove();
            layer.msg('已删除!', {icon: 1, time: 2000});
        });
    }

    //清除职位框
    function clean(obj, id) {
        $(obj).parent("div").find("input").val("");
    }

    //删除多余的职位列
    $("#res").click(function () {
        $("#test2").find("div").remove();
        $("#update_from").find("input[type=text]").css("border", "1px solid #D5D5D5")
		$("#parent_department").val("");
    })

    function text_length(obj) {
        $(obj).next("p").find(".textarea-length").text($(obj).val().length)
    }

    /******树状图********/
    var setting = {
        view: {
            dblClickExpand: false,
            showLine: false,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid",
                rootPId: ""
            }
        },
        callback: {
            onClick: zTreeOnClick
        }
    };

    //树节点的点击事件
    function zTreeOnClick(event, treeId, treeNode) {
        $.ajax({
            url: "/department/getById",
            data: {
                id: treeNode.id
            },
            dataType: "json",
            contentType: 'application/json',
            success: function (da) {
				if(da.rs){
                    var d = da.data;
                    //清除多余的职位框
                    $("#test2").find("div").remove();
                    //清空职位输入框
                    $("#post").val("");
                    $("#department_no").val(d.no);
                    $("#department_name").val(d.name);
                    $("#p_id").val(d.pid);
                    $("#d_id").val(d.id);
                    $("#manager").val(d.manager);
                    $("#phone").val(d.phone);
                    $("#tel").val(d.tel);
                    $("#email").val(d.email);
                    $("#intro").val(d.intro);
					$("#parent_department").val(d.name);
                    for (var i in d.posts) {
                        var post = d.posts[i];
                        if (i == 0) {
                            $("#post").val(post.name);
                            $("#post").attr("post-id", post.id);
                        } else {
                            $("#test2").append('<div><input name="posts" post-id="' + post.id + '" value="' + post.name + '" type="text" class="add_text" style="margin-left:11px" onblur="judge_post(this)"/><a href="#" onclick="clean(this,1)">清除</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="member_del(this,1)">删除</a><br/><br/></div>');
                        }
                    }
				}else{
					layer.msg(da.msg, {icon: 2, time: 2000});
				}
            }
        })
    }

    var code;

    function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>" + str + "</li>");
    }

    //获得树形菜单的参数
    $(document).ready(function () {
        $.ajax({
            url: "/department/getAllDepartment",
			dataType : "json",
            contentType: 'application/json',
            success: function (da) {
            	if(!da.rs){
					layer.msg(da.msg, {icon: 2, time: 2000});
					return;
				}
				var d = da.data;
				var t = $("#treeDemo");
				t = $.fn.zTree.init(t, setting, d);

            }
        })
    });


    function fun1() {
        $("#test2").append('<div><input name="posts" value="" type="text" class="add_text" style="margin-left:11px" onblur="judge_post(this)"/><a href="#" onclick="clean(this,1)">清除</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="member_del(this, 1)">删除</a><br/><br/></div>');
    }

    //新增按钮
    function xinzeng() {
        document.getElementById("spans1").style.display = "none";
        document.getElementById("spans2").style.display = "block";
        $("input[type=text]").css("border", "1px solid #D5D5D5");
    }

    //更新表单提交
    $("#update_from").submit(function (e) {
        e.preventDefault();
        //没有选中部门，提交时会提示
        if ($("#d_id").val() == "") {
            layer.msg('请选择一个部门进行修改!', {icon: 2, time: 2000});
            return;
        }
        //循环验证表单
        for (var i = 0; i < arr3.length; i++) {
            var b = judge($("#" + arr3[i] + ""), i + 1);
            if (b) {
                return;
            }
        }
        //验证编号是否存在
        judge_no($("#d_id").val(), $("#department_no").val());
        if (boo) {
            return;
        }
        //验证职位格式
        var post_list = $("#update_from").find("input[name=post]");
        for (var i = 0; i < post_list; i++) {
            if (post_list[i].value != "" && test4.test(post_list[i].value)) {
                layer.msg("第" + (i + 1) + "职位格式不对", {icon: 2, time: 2000});
            }
        }
        //$("#update_from").serializeArray();
        finalRes = $("#update_from").serializeArray().reduce(function (result, item) {
            result[item.name] = item.value;
            return result;
        }, {})
        finalRes.posts = [];
        for (var i = 0; i < $("input[name=posts]").length; i++) {
            var a = {
                name: $("input[name=posts]")[i].value,
                id: $("input[name=posts]")[i].getAttribute("post-id"),
                dId: $("#d_id").val()
            }
            finalRes.posts.push(a);
        }
        $.ajax({
            url: "/department/update",
            type: "post",
            data: JSON.stringify(finalRes),
            dataType: "json",
            contentType: "application/json",
            success: function (da) {
				if(!da.rs){
					layer.msg(da.msg, {icon: 2, time: 2000});
					return;
				}
				var d = da.data;
                layer.msg('已更新!', {icon: 1, time: 2000});
                window.parent.document.getElementById('iframe').contentWindow.location.reload(true);
            }
        })
    })

    //添加表单提交
    $("#add_from").submit(function (e) {
        e.preventDefault();
        //循环验证表单
        for (var i = 0; i < arr4.length; i++) {
            var b = judge($("#" + arr4[i] + ""), i + 1);
            if (b) {
                return;
            }
        }
        //验证编号是否存在
        judge_no(null, $("#d_no").val())
        if (boo) {
            return;
        }
        abc = $("#add_from").serializeArray().reduce(function (result, item) {
            result[item.name] = item.value;
            return result;
        }, {})
        abc.cId = $("#c_id").val();
        abc.pid = $("#d_id").val();
        $.ajax({
            url: "/department/insert",
            type: "post",
            data: JSON.stringify(abc),
            dataType: "json",
            contentType: "application/json",
            success: function (da) {
				if(!da.rs){
					layer.msg(da.msg, {icon: 2, time: 2000});
					return;
				}
				var d = da.data;
                layer.msg('已添加!', {icon: 1, time: 2000});
                window.parent.document.getElementById('iframe').contentWindow.location.reload(true);
            }
        })
    })

    //删除部门
    function del() {
        if ($("#d_id").val() == "") {
            layer.msg('请选择一个部门进行删除!', {icon: 2, time: 2000});
            return;
        }
        $.ajax({
            url: "/department/del",
            data: {
                id: $("#d_id").val()
            },
            dataType: "json",
            success: function (da) {
				if(!da.rs){
					layer.msg(da.msg, {icon: 2, time: 2000});
					return;
				}
				var d = da.data;
                if (d.rs) {
                    alert("还存在子部门");
                    return;
                }
                layer.msg('已删除', {icon: 1, time: 2000});
                window.parent.document.getElementById('iframe').contentWindow.location.reload(true);
            }
        })
    }

    //切换回修改界面
    function exit_a() {
        document.getElementById("spans2").style.display = "none";
        document.getElementById("spans1").style.display = "block";
        $("input[type=text]").css("border", "1px solid #D5D5D5");
		$("#parent_department").val("");
    }


    //添加编号验证
    $("#d_no").blur(function () {
        judge_no(null, $("#d_no").val())
    })

    //修改编号验证
    $("#department_no").blur(function () {
        judge_no($("#d_id").val(), $("#department_no").val())
    })

    //编号验证
    function judge_no(id, no) {
        if (no == null || no == "") {
            return;
        }
        $.ajax({
            url: "/department/testNo",
            data: {
                id: id,
                no: no
            },
            dataType: "json",
            contentType: "application/json",
            success: function (da) {
				if(!da.rs){
					layer.msg(da.msg, {icon: 2, time: 2000});
					return;
				}
				var d = da.data;
                if (d.rs) {
                    layer.msg('编号已存在', {icon: 2, time: 2000});
                    boo = true;
                    $("#department_no").css("border", "1px solid #f00");
                    $("#d_no").css("border", "1px solid #f00");
                } else {
                    boo = false;
                    $("#department_no").css("border", "1px solid #D5D5D5");
                    $("#d_no").css("border", "1px solid #D5D5D5");
                }
            }
        })
    }

    //表单验证(除职位)
    function judge(obj, i) {
        if (i == 1 || i == 2 || i == 3 || i == 4) {
            if (!arr[i - 1].test($(obj).val())) {
                $(obj).css("border", "1px solid #f00");
                layer.msg(arr2[i - 1], {icon: 2, time: 2000});
                return true;
            } else {
                $(obj).css("border", "1px solid #D5D5D5");
                return false;
            }
        } else {
            if ($(obj).val() != "") {
                if (!arr[i - 1].test($(obj).val())) {
                    $(obj).css("border", "1px solid #f00");
                    layer.msg(arr2[i - 1], {icon: 2, time: 2000});
                    return true;
                } else {
                    $(obj).css("border", "1px solid #D5D5D5");
                    return false;
                }
            } else {
                $(obj).css("border", "1px solid #D5D5D5");
                return false;
            }
        }
    }

    //职位验证
    function judge_post(obj) {
        if ($(obj).val() != "" && !test4.test($(obj).val())) {
            $(obj).css("border", "1px solid #f00");
            layer.msg("职位不能输入特殊字符,且长度为2-20", {icon: 2, time: 2000});
            return true;
        } else {
            $(obj).css("border", "1px solid #D5D5D5");
            return false;
        }
    }

</script>
</body>
</html>
